<template>
  <section class="container">
    <aside class="container__aside">
      <nav>
        <RouterLink to="/icon-view">Icon图标</RouterLink>
        <RouterLink to="/button-view">Button按钮</RouterLink>
        <RouterLink to="/card-view">Card卡片</RouterLink>
        <RouterLink to="/dialog-view">Dialog对话框</RouterLink>
        <RouterLink to="/pager-view">Pager分页</RouterLink>
      </nav>
    </aside>

    <section class="container__content">
      <header class="container__header">
        <h1>Jsw UI Plus</h1>
      </header>

      <main class="container__main">
        <RouterView #default="{ Component }">
          <Transition name="fade" mode="out-in" appear>
            <component :is="Component" />
          </Transition>
        </RouterView>
      </main>
    </section>
  </section>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.container {
  display: flex;
  width: 100%;
  height: 100%;

  &__aside {
    width: 200px;
  }

  &__content {
    flex: 1;
    margin-left: 20px;

    display: flex;
    flex-direction: column;
  }

  &__header {
    height: 80px;
    line-height: 1.5;
  }

  &__main {
    flex: 1;
    margin-top: 20px;
  }
}

h1 {
  font-size: 24px;
}

nav {
  display: flex;
  flex-direction: column;

  width: 100%;
  font-size: 18px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  transform: scale(1.1);
  color: hsla(160, 100%, 37%, 1);
}

nav a {
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}
</style>
